//全局样式
.el {
  &-input-number {
    width: 100% !important;
  }

  &-cascader {
    width: 100% !important;
  }

  &-image {
    background: var(--el-card-bg-color);
  }

  &-date-editor {
    width: 100% !important;
  }

  &-space {
    & > span {
      color: var(--el-border-color-lighter);
    }
  }

  &-button {
    &[long] {
      width: 100%;
    }

    &[hide] {
      opacity: 0;
      pointer-events: none;
      cursor: default;
    }
  }


  &-dropdown {
    &[long] {
      width: 100%;
    }
  }

  &-drawer {
    .el-drawer__header {
      margin-bottom: 0;
      padding: 15px !important;
      border-bottom: 1px solid var(--el-border-color-lighter);

      .el-drawer__title {
        font-weight: bold;
      }
    }

    .el-drawer__body {
      padding: 15px !important;
    }
  }

  &-dropdown {
    outline: none;
  }
}

//全局表单提示
.app-form-create-hint {
  display: block;
  width: 100%;
  color: var(--el-color-primary-light-5);
  font-size: 12px;
  line-height: 1.4;
  margin: 5px 0;
}

//基础容器颜色
.app-card-{
  &bg {
    box-sizing: border-box;
    background: var(--el-bg-color);
    border:1px solid var(--el-border-color-light);
    border-radius: 8px;
  }
}

.app-font- {
  &weight {
    font-weight: bold;
  }

  &size- {
    @for $i from 12 through 30 {
      &#{$i} {
        font-size: #{$i}px;
      }
    }
  }
}

//文字方向
.app-text- {
  &center {
    text-align: center;
  }

  &right {
    text-align: right;
  }

  &left {
    text-align: left;
  }
}


//最小宽度
.app-min-width- {
  //循环生成告诉 .app-min-width-p10到.app-min-width-p300
  @for $i from 1 through 30 {
    &p#{$i}0 {
      min-width: #{$i}0px !important;
    }
  }
}


//宽度
.app-width- {
  &full {
    width: 100%;
  }

  //循环生成告诉 .app-width-p10到.app-width-p300
  @for $i from 1 through 60 {
    &p#{$i}0 {
      width: #{$i}0px !important;
    }
  }
}

//字体大小
.app-font-size-{
  @for $i from 1 through 60 {
    &#{$i}0 {
      width: #{$i}0px !important;
    }
  }
}


.app-height- {
  &full {
    height: 100%;
  }

  //训话生成告诉 .app-height-p10到.app-height-p300
  @for $i from 1 through 30 {
    &p#{$i}0 {
      height: #{$i}0px !important;
    }
  }
}


//鼠标光标点击
.app- {
  &tap {
    cursor: pointer;
  }

  &hide {
    display: none;
  }

  &mourn { //哀悼模式
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
  }
}

.app-vertical- {
  &middle {
    vertical-align: middle !important;
  }

  &initial {
    vertical-align: initial !important;
  }

  &top {
    vertical-align: top !important;
  }
}

.app-margin- {
  &tiny {
    margin: 5px !important;
  }

  &small {
    margin: 10px !important;
  }

  &medium {
    margin: 15px !important;
  }

  &large {
    margin: 20px !important;
  }

  &interval {
    margin: var(--app-interval) !important;
  }


  //上边距
  &top- {
    //训话生成告诉 .app-height-p10到.app-height-p300
    @for $i from 1 through 50 {
      &p#{$i} {
        margin-top: #{$i}px !important;
      }
    }

    &tiny {
      margin-top: 5px !important;
    }

    &small {
      margin-top: 10px !important;
    }

    &medium {
      margin-top: 15px !important;
    }

    &large {
      margin-top: 20px !important;
    }

    &interval {
      margin-top: var(--app-interval) !important;
    }
  }

  //下边距
  &bottom- {
    &tiny {
      margin-bottom: 5px;
    }

    &small {
      margin-bottom: 10px;
    }

    &medium {
      margin-bottom: 15px;
    }

    &large {
      margin-bottom: 20px !important;
    }

    &interval {
      margin-bottom: var(--app-interval);
    }
  }

  //左边距
  &left- {
    &tiny {
      margin-left: 5px;
    }

    &small {
      margin-left: 10px;
    }

    &medium {
      margin-left: 15px;
    }

    &large {
      margin-left: 20px;
    }

    &interval {
      margin-left: var(--app-interval);
    }
  }

  //右边距
  &right- {
    &tiny {
      margin-right: 5px !important;
    }

    &small {
      margin-right: 10px !important;
    }

    &medium {
      margin-right: 15px !important;
    }

    &large {
      margin-right: 20px !important;
    }

    &interval {
      margin-right: var(--app-interval) !important;
    }
  }
}

.form-preview {
  .el-form {
    .is-required {
      .el-form-item__label {
        &:before {
          display: none;
        }
      }
    }
  }
}